<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>博客详情</title>
    <base href="<%=request.getContextPath()%>/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/common/css/base.css">
    <link rel="stylesheet" href="static/common/css/article-list.css">
    <link rel="stylesheet" href="static/common/css/author-list.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/jquery/js.cookie.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="icon" href="static/images/favicon.ico">
    <style>
        .layui-row > div {
            height: 120px;
        }

        .content .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content .avatar img {
            display: block;
            height: 100px;
            width: 100px;
            border-radius: 50%;
        }

        .content .user-name {
            height: 40px;
            display: flex;
            align-items: flex-end;
        }

        .content .user-list {
            height: 80px;
            display: flex;
            align-items: center;
        }

        .content .user-list .user-list-item {
            width: 50px;
            border-right: 1px solid #f0f0f0;
            margin-right: 10px;
        }

        .content .follow-opt {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .content .author {
            height: 50px;
            display: flex;
        }

        .content .author .author-avatar {
            height: 100%;
            width: 50px;
        }

        .content .author .author-avatar a {
            display: block;
            height: 40px;
            width: 40px;
        }

        .content .author .author-avatar a img {
            display: block;
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }

        .content .author .author-info > div {
            display: flex;
            height: 20px;
            align-items: center;
        }

        .content .author .author-info .author-name .name, #applyTime {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="nav">
            <div class="layui-row">
                <div class="layui-col-md2">
                    <div class="logo">
                        <a href="">
                            <img id="logo" src="" alt="">
                        </a>
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <ul class="menu">
                                <li class="menu-item">
                                    <a href="page/index">
                                        <i class="layui-icon layui-icon-find-fill"></i>
                                        首页
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="page/category">
                                        <i class="layui-icon layui-icon-template-1"></i>
                                        分类
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="page/author">
                                        <i class="layui-icon layui-icon-group"></i>
                                        作者
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="layui-col-md6">
                            <div class="search">
                                <div class="search-group">
                                    <input id="search" type="text" placeholder="热门搜索">
                                    <i id="searchBtn" class="layui-icon layui-icon-search"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="user">
                                <div class="avatar">
                                    <a id="dropMenu" href="javascript:;">
                                        <img id="vipAvatar" src="static/upload/avatar/defaultAvatar.jpg"
                                             class="layui-nav-img">
                                        <span id="vipName"></span>
                                    </a>
                                </div>
                                <div class="login">
                                    <div class="login-btn">
                                        <a href="javascript:;" onclick="showLoginWin(0)">登录</a>
                                    </div>
                                    <div class="reg-btn">
                                        <a href="javascript:;" onclick="showLoginWin(1)">注册</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="apply">
                                <div class="apply-btn">
                                    <a href="javascript:;">
                                        <i class="layui-icon layui-icon-edit"></i>
                                        发布文章
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="content" style="display: block;width: 960px;margin: 0 auto;">
            <div class="user-info">
                <div class="layui-row" style="margin-top: 20px">
                    <div class="layui-col-md2">
                        <div class="avatar">
                            <img src="" alt="">
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="user-name" style="display: flex;align-items: center">
                            <h2></h2>
                            <i title="男" id="male" class="layui-icon layui-icon-male"
                               style="font-size: 18px;margin-left: 5px;color: #01aaed;display: none;"></i>
                            <i title="女" id="female" class="layui-icon layui-icon-female"
                               style="font-size: 18px;margin-left: 5px;color: pink;display: none;"></i>
                        </div>
                        <div class="user-list">
                            <div class="user-list-item">
                                <a href="javascript:;" onclick="changeTab('like')">
                                    <div id="likeCount">123</div>
                                    <div>点赞<i class="layui-icon layui-icon-right"></i></div>
                                </a>
                            </div>
                            <div class="user-list-item">
                                <a href="javascript:;" onclick="changeTab('collection')">
                                    <div id="collectionCount">123</div>
                                    <div>收藏<i class="layui-icon layui-icon-right"></i></div>
                                </a>
                            </div>
                            <div class="user-list-item">
                                <a href="javascript:;" onclick="changeTab('follow')">
                                    <div id="followCount">123</div>
                                    <div>粉丝<i class="layui-icon layui-icon-right"></i></div>
                                </a>
                            </div>
                            <div class="user-list-item">
                                <a href="javascript:;" onclick="changeTab('followed')">
                                    <div id="followedCount">123</div>
                                    <div>关注<i class="layui-icon layui-icon-right"></i></div>
                                </a>
                            </div>
                            <div class="user-list-item">
                                <a href="javascript:;" onclick="changeTab('comment')">
                                    <div id="commentCount">123</div>
                                    <div>评论<i class="layui-icon layui-icon-right"></i></div>
                                </a>
                            </div>
                            <div class="user-list-item">
                                <a href="javascript:;" onclick="changeTab('article')">
                                    <div id="articleCount">123</div>
                                    <div>文章<i class="layui-icon layui-icon-right"></i></div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="follow-opt"></div>
                    </div>
                </div>
            </div>
            <div class="user-tabs" style="width: 700px;">
                <div class="layui-tab layui-tab-brief" lay-filter="tabs">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="like">点赞</li>
                        <li lay-id="collection">收藏</li>
                        <li lay-id="follow">粉丝</li>
                        <li lay-id="followed">关注</li>
                        <li lay-id="comment">评论</li>
                        <li lay-id="article">文章</li>
                        <li lay-id="info">信息</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="likeList"></div>
                            <div id="likePageTool" style="margin: 10px auto;text-align: center"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="collectionList"></div>
                            <div id="collectionPageTool" style="margin: 10px auto;text-align: center"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="followList" class="author-list">
                            </div>
                            <div id="followPageTool" style="margin: 10px auto;text-align: center"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="followedList" class="author-list"></div>
                            <div id="followedPageTool" style="margin: 10px auto;text-align: center"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="commentList"></div>
                            <div id="commentPageTool" style="margin: 10px auto;text-align: center"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="articleList"></div>
                            <div id="articlePageTool" style="margin: 10px auto;text-align: center"></div>
                        </div>
                        <div class="layui-tab-item">
                            <form class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="username">用户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="username" autocomplete="off" disabled
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="phone">手机号</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="phone" autocomplete="off" disabled
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="nickname">昵称</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="nickname" lay-verify="required"
                                               lay-reqtext="请填写昵称" name="nickname" placeholder="请输入昵称"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="sex" value="1" title="男">
                                        <input type="radio" name="sex" value="2" title="女">
                                        <input type="radio" name="sex" value="0" title="未选择" checked>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="profile"
                                           style="min-height: 100px">个人简介</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="请输入内容" id="profile" name="profile"
                                                  class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="min-height: 100px">头像</label>
                                    <div class="layui-input-block">
                                        <input type="hidden" name="avatar" id="avatar">
                                        <div style="min-height: 100px;display: flex;align-items: center">
                                            <img id="avatarImg"
                                                 style="display: block;height: 90px;width: 90px;margin-left: 10px;border-radius: 50%;cursor: pointer;"
                                                 src=""
                                                 alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="text-align: right">
                                        <button type="submit" class="layui-btn" lay-submit lay-filter="submit">保存
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="static/common/js/ajax.js"></script>
<script src="static/common/js/base.js"></script>
<script src="static/common/js/author.js"></script>
<script src="static/common/js/article.js"></script>
<script>
    /*获取地址中携带的id的值*/
    let hrefs = location.href.split("/");
    const userinfoId = hrefs[hrefs.length - 1].split("#")[0];
    const loginInfo = getLoginInfo();
    /*加载分页插件*/
    const laypage = layui.laypage;
    const element = layui.element;
    const form = layui.form;
    const upload = layui.upload;
    /*渲染上传组件*/
    upload.render({
        elem: "#avatarImg",
        url: "upload",
        data: {type: "avatar"},
        acceptMime: 'image/*',
        size: 1024 * 1024 * 20,/*单位kb*/
        done(res) {
            if (res.code === 200) {
                $("#avatar").val(res.msg);
                $("#avatarImg").prop("src", "static/upload/" + res.msg)
            }
        },
        error(e) {
            console.log(e);
            layer.msg('头像上传异常！', {icon: 2});
        }
    });

    /*监听表单提交*/
    form.on("submit(submit)", function (data) {
        data.field.userinfoId = loginInfo.userinfoId
        http.post('article/user/update', data.field, function () {
            layer.msg('更新成功！', {icon: 6})
            getLoginInfo();
            getUserInfo();
        })
        return false;
    });


    // hash 地址定位
    let hashName = 'tabId'; // hash 名称
    let layId = location.hash.replace(new RegExp('^#' + hashName + '='), '') || 'like'; // 获取 lay-id 值
    changeTab(layId);
    // 切换事件
    element.on('tab(tabs)', function () {
        location.hash = hashName + '=' + this.getAttribute('lay-id');
    });
    /*初始化分页数据*/
    const likePageInfo = {
        page: 1,
        limit: 10
    }
    const collectionPageInfo = {
        page: 1,
        limit: 10
    }
    const followPageInfo = {
        page: 1,
        limit: 10
    }
    const followedPageInfo = {
        page: 1,
        limit: 10
    }
    const commentPageInfo = {
        page: 1,
        limit: 10
    }
    const articlePageInfo = {
        page: 1,
        limit: 10
    }
    /*判断请求的合法性*/
    if (Number.isNaN(Number.parseInt(userinfoId))) {
        layer.msg('用户异常！', {icon: 5}, function () {
            location.replace("page/index")
        })
    } else {
        getUserInfo();
    }

    function changeTab(layId) {
        // 初始切换
        element.tabChange('tabs', layId);
    }

    document.addEventListener("tagList", function () {
        getFollowedPage()
        getFollowPage()
    })

    function getUserInfo() {
        http.get('blog/user/info/' + userinfoId, null, function (res) {
            const userinfo = res.data;
            if (userinfo.status === 1 && userinfo.role === 2) {
                $(".avatar img").prop("src", "static/upload/" + userinfo.avatar)
                $(".user-name h2").text(userinfo.nickname)
                $("#username").val(userinfo.username);
                $("#phone").val(userinfo.phone);
                $("#nickname").val(userinfo.nickname);
                $("input[name='sex']").each(function (index, dom) {
                    dom.checked = dom.value == userinfo.sex
                });
                if (userinfo.sex === 1) {
                    $("#male").show();
                    $("#female").hide();
                } else if (userinfo.sex === 2) {
                    $("#male").hide();
                    $("#female").show();
                } else {
                    $("#male").hide();
                    $("#female").hide();
                }
                $("#profile").val(userinfo.profile);
                $("#avatar").val(userinfo.avatar);
                $("#avatarImg").prop("src", "static/upload/" + userinfo.avatar)
                form.render();
                let $followHtml = '';
                if (loginInfo.userinfoId != userinfo.userinfoId) {
                    $followHtml = getFollowHtml(userinfo.userinfoId);
                    let isFollow = false;
                    for (let i = 0; i < userinfo.followList.length; i++) {
                        if (userinfo.followList[i].optId == loginInfo.userinfoId) {
                            isFollow = true;
                            break;
                        }
                    }
                    if (isFollow) {
                        $followHtml = getFollowedHtml(userinfo.userinfoId);
                    }
                }
                $(".follow-opt").empty().append($followHtml);
                getLikePage();
                getCollectionPage()
                getFollowPage()
                getFollowedPage()
                getCommentPage()
                getArticlePage()
            } else {
                layer.msg('用户异常！', {icon: 5}, function () {
                    location.replace("page/index")
                })
            }
        })
    }

    function getLikePage() {
        http.get('blog/user/like/page', {...likePageInfo, userinfoId}, function (res) {
            $("#likeCount").text(res.count)
            createArticleList("likeList", res.data)
            if (res.count > likePageInfo.limit) {
                /*渲染分页插件*/
                laypage.render({
                    elem: "likePageTool",
                    count: res.count,
                    limit: likePageInfo.limit,
                    curr: likePageInfo.page,
                    jump: function (obj, first) {
                        likePageInfo.page = obj.curr
                        likePageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getLikePage();
                        }
                    }
                })
            }
        })
    }

    function getCollectionPage() {
        http.get('blog/user/collection/page', {...collectionPageInfo, userinfoId}, function (res) {
            $("#collectionCount").text(res.count)
            createArticleList("collectionList", res.data)
            if (res.count > collectionPageInfo.limit) {
                /*渲染分页插件*/
                laypage.render({
                    elem: "collectionPageTool",
                    count: res.count,
                    limit: collectionPageInfo.limit,
                    curr: collectionPageInfo.page,
                    jump: function (obj, first) {
                        collectionPageInfo.page = obj.curr
                        collectionPageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getCollectionPage();
                        }
                    }
                })
            }
        })
    }

    function getFollowPage() {
        http.get('blog/user/follow/page', {...followPageInfo, userinfoId}, function (res) {
            $("#followCount").text(res.count)
            createAuthorList("followList", res.data)
            if (res.count > followPageInfo.limit) {
                /*渲染分页插件*/
                laypage.render({
                    elem: "followPageTool",
                    count: res.count,
                    limit: followPageInfo.limit,
                    curr: followPageInfo.page,
                    jump: function (obj, first) {
                        followPageInfo.page = obj.curr
                        followPageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getFollowPage();
                        }
                    }
                })
            }
        })
    }

    function getFollowedPage() {
        http.get('blog/user/followed/page', {...followedPageInfo, userinfoId}, function (res) {
            $("#followedCount").text(res.count)
            createAuthorList("followedList", res.data)
            if (res.count > followedPageInfo.limit) {
                /*渲染分页插件*/
                laypage.render({
                    elem: "followedPageTool",
                    count: res.count,
                    limit: followedPageInfo.limit,
                    curr: followedPageInfo.page,
                    jump: function (obj, first) {
                        followedPageInfo.page = obj.curr
                        followedPageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getFollowedPage();
                        }
                    }
                })
            }
        })
    }

    function getCommentPage() {
        http.get('blog/user/comment/page', {...commentPageInfo, userinfoId}, function (res) {
            /*渲染评论总数*/
            $("#commentCount").text(res.count)

            const commentList = res.data;
            let $html = '';
            for (const comment of commentList) {
                $html += '<div class="comment-item" style="margin-top: 10px"><div class="author"><div class="author-avatar"><a href="page/article/info/' + comment.article.articleId + '"><img src="static/upload/' + comment.article.cover + '" alt=""></a></div><div class="author-info" style="width: 70%"><div class="author-name" style="justify-content: space-between"><div class="name"><a href="page/article/info/' + comment.article.articleId + '" title="' + comment.article.title + '">' + comment.article.title + '</a></div><div class="del" style="display: ' + (comment.userinfo.userinfoId === loginInfo.userinfoId ? "block" : "none") + '"><a href="javascript:;" onclick="delComment(' + comment.commentId + ')">删除评论<a/></div></div><div class="article-info"><div class="comment-time">评论时间:' + comment.commentTime + '</div></div></div></div><div class="comment-content"><blockquote class="layui-elem-quote layui-quote-nm" style="width: 90%">' + comment.content + '</blockquote></div></div>';
            }
            $("#commentList").empty().append($html);
            if (res.count > commentPageInfo.limit) {
                /*渲染分页插件*/
                laypage.render({
                    elem: "commentPageTool",
                    count: res.count,
                    limit: commentPageInfo.limit,
                    curr: commentPageInfo.page,
                    jump: function (obj, first) {
                        commentPageInfo.page = obj.curr
                        commentPageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getCommentPage();
                        }
                    }
                })
            }
        })
    }

    function delComment(commentId) {
        layer.confirm('确定删除该评论吗?', {icon: 3}, function (index) {
            http.delete('article/comment/delete/' + commentId, null, function () {
                layer.msg("删除成功！", {icon: 6})
                commentPageInfo.page = 1
                getCommentPage()
            })
            layer.close(index);
        })
    }

    function getArticlePage() {
        http.get('blog/user/article/page', {...articlePageInfo, userinfoId}, function (res) {
            $("#articleCount").text(res.count)
            createArticleList("articleList", res.data)
            if (res.count > articlePageInfo.limit) {
                /*渲染分页插件*/
                laypage.render({
                    elem: "articlePageTool",
                    count: res.count,
                    limit: articlePageInfo.limit,
                    curr: articlePageInfo.page,
                    jump: function (obj, first) {
                        articlePageInfo.page = obj.curr
                        articlePageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getArticlePage();
                        }
                    }
                })
            }
        })
    }


</script>
</html>
